<template>
  <div 
    :class="[
      'bx-card',
      'bx-glass',
      'bx-glass-gradient',
      'bx-glass-glow',
      'bx-float',
      {
        'bx-card--clickable': clickable,
        'bx-card--hover': hoverable
      }
    ]"
    :style="cardStyle"
    @click="handleClick"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    @mousemove="handleMouseMove"
  >
    <!-- 卡片图标 -->
    <div v-if="$slots.icon || icon" class="bx-card__icon">
      <slot name="icon">
        <component :is="icon" v-if="icon" />
      </slot>
    </div>

    <!-- 卡片标题 -->
    <h3 v-if="title || $slots.title" class="bx-card__title bx-text-primary">
      <slot name="title">{{ title }}</slot>
    </h3>

    <!-- 卡片内容 -->
    <div v-if="$slots.default" class="bx-card__content bx-text-secondary">
      <slot></slot>
    </div>

    <!-- 卡片描述 -->
    <p v-if="description" class="bx-card__description bx-text-secondary">
      {{ description }}
    </p>

    <!-- 卡片操作区 -->
    <div v-if="$slots.actions" class="bx-card__actions">
      <slot name="actions"></slot>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'BxCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    icon: {
      type: [String, Object],
      default: null
    },
    clickable: {
      type: Boolean,
      default: false
    },
    hoverable: {
      type: Boolean,
      default: true
    },
    width: {
      type: [String, Number],
      default: 'auto'
    },
    height: {
      type: [String, Number],
      default: 'auto'
    }
  },
  emits: ['click', 'mouseenter', 'mouseleave'],
  setup(props, { emit }) {
    const isHovered = ref(false)
    const mousePosition = ref({ x: 0, y: 0 })

    const cardStyle = computed(() => {
      const style = {}
      
      if (props.width !== 'auto') {
        style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
      }
      
      if (props.height !== 'auto') {
        style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
      }

      return style
    })

    const handleClick = (event) => {
      if (props.clickable) {
        emit('click', event)
      }
    }

    const handleMouseEnter = (event) => {
      isHovered.value = true
      emit('mouseenter', event)
    }

    const handleMouseLeave = (event) => {
      isHovered.value = false
      mousePosition.value = { x: 0, y: 0 }
      emit('mouseleave', event)
    }

    const handleMouseMove = (event) => {
      if (!props.hoverable) return
      
      const rect = event.currentTarget.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top
      const centerX = rect.width / 2
      const centerY = rect.height / 2
      const rotateX = (y - centerY) / 20
      const rotateY = (centerX - x) / 20
      
      mousePosition.value = { x: rotateX, y: rotateY }
      
      event.currentTarget.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-6px) scale(1.02)`
    }

    return {
      cardStyle,
      handleClick,
      handleMouseEnter,
      handleMouseLeave,
      handleMouseMove
    }
  }
}
</script>

<style scoped>
.bx-card {
  position: relative;
  border-radius: var(--bx-radius-large);
  padding: var(--bx-spacing-xl);
  max-width: 340px;
  min-height: 220px;
  transform: translateZ(0);
  overflow: hidden;
  font-family: var(--bx-font-family);
}

.bx-card--clickable {
  cursor: pointer;
}

.bx-card--hover:hover {
  transform: translateY(-6px) scale(1.02);
}

.bx-card__icon {
  width: 56px;
  height: 56px;
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur);
  border: 1px solid var(--bx-glass-border);
  border-radius: var(--bx-radius-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--bx-spacing-lg);
  position: relative;
  z-index: 2;
  transition: all var(--bx-transition-medium);
}

.bx-card__icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--bx-transition-medium);
}

.bx-card:hover .bx-card__icon {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.bx-card:hover .bx-card__icon::before {
  opacity: 1;
}

.bx-card__icon :deep(svg) {
  width: 28px;
  height: 28px;
  color: var(--bx-text-primary);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.bx-card__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
  letter-spacing: -0.02em;
}

.bx-card__content {
  position: relative;
  z-index: 2;
  margin-bottom: var(--bx-spacing-md);
}

.bx-card__description {
  font-size: 15px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
  font-weight: 400;
  margin: 0;
}

.bx-card__actions {
  position: relative;
  z-index: 2;
  margin-top: var(--bx-spacing-lg);
  display: flex;
  gap: var(--bx-spacing-md);
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-card {
    max-width: 100%;
    padding: var(--bx-spacing-lg);
    min-height: 200px;
  }
  
  .bx-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  
  .bx-card__icon :deep(svg) {
    width: 24px;
    height: 24px;
  }
  
  .bx-card__title {
    font-size: 20px;
  }
  
  .bx-card__description {
    font-size: 14px;
  }
}
</style>

